<template>
  <div class="Footer-box jy-style-height">
    <img
      class="Footer-bg jy-style-height"
      :src="publicUrls + 'free/style14/footerStyle1Bg.png' + '?imageView2/3/format/webp'"
      alt=""
    />
    <div class="Footer-content">
      <t-upload
        v-if="!route.meta.loopType"
        ref="uploadRef3"
        :before-upload="beforeUpload"
        theme="custom"
        accept=".png,.jpg,.jpeg"
        :auto-upload="true"
        :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
        @fail="handleFail"
      >
        <div class="content-logo">
          <img :src="urls + store.styleInfo.logo" alt="" v-if="store.styleInfo?.logo" />
          <span v-else>请上传LOGO图片</span>
        </div>
      </t-upload>
      <div class="content-logo logo-mg" @click="toHome(0)" v-else>
        <img :src="urls + store.styleInfo.logo" alt="" v-if="store.styleInfo?.logo" />
      </div>
      <a :href="store.isMobileType ? doorUrl + 'wap/home' : doorUrl" class="content-door" v-if="route.meta.loopType">
        <i class="iconfonts">&#xe6dd;</i>
        <span>永不落幕的展览与展示平台</span>
      </a>
      <div class="content-door" v-else>
        <i class="iconfonts">&#xe6dd;</i>
        <span>永不落幕的展览与展示平台</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style12',
});
</script>

<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { url, heards, urls } from '@/utils/request/upload';
import iconTab from '../../freeIconComponent/footerIcon.vue';
import { useRoute } from 'vue-router';
// import FooterIcon from '../../freeIconComponent/footerIcon.vue';
import { doorUrl, publicUrls } from '@/utils/minxin';
import { commonDataStore } from '@/store';
import { useProjectStore } from '@/store';
import { ref, watch, nextTick, defineComponent } from 'vue';
import COS from 'cos-js-sdk-v5';
import { updateProject } from '@/api/project/project';

import { getCloud } from '@/api/upLoad/index';
import { upLoadFn } from '@/utils/request/upload';

const uploadAllFilesInOneRequest = ref(false);

// 'icon-hover-active': route.meta.isActive === item.id,
const props = defineProps({
  tabList: {
    type: Object,
  },
});
const logoshow = ref(false); //logo上传状态判断

const route = useRoute();
const commonStore = commonDataStore();
const store = useProjectStore();
// 跳转官网
const toWeb = () => {
  window.open(doorUrl, '_blank');
};
// 回到首页
const toHome = (index: number) => {
  if (index == 0) {
    const el = document.getElementById('edit-scroll-box');
    // store.bannerShow = false;
    // store.bannerLock = false;
    setTimeout(() => {
      el.scrollTo({
        left: 0,
      });
    }, 20);
  }
};
const handleFail = (e: any) => {};
const beforeUpload = (file: any) => {
  //回调钩子
  console.log(file.size);

  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (
    file.type !== 'image/gif' &&
    file.type !== 'image/png' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/bmp'
  ) {
    MessagePlugin.error('上传文件格式错误');
    return;
  }
  if (file.size > 500 * 1024) {
    MessagePlugin.error('上传大小超出500k限制');
    return;
  }
  logoshow.value = true;
  upLoadFn(file, 5).then((res: any) => {
    // console.log(res);
    if (res) {
      store.setLogo(res);
      // formData.coverUrl = res;
      updateProject({ logoUrl: res }, localStorage.getItem('projectId')).then((res) => {
        // console.log(res, 'res-----');
      });
    } else {
      MessagePlugin.error('创建成功');
    }
    logoshow.value = false;
  });
};
</script>

<style scoped lang="less">
.Footer-box {
  position: relative;
  margin-left: 20px;
  width: 280px;
}
.Footer-bg {
  width: 280px;
  position: absolute;
  top: 0;
  left: 0;
}
.Footer-content {
  width: 280px;
  height: 100%;
  position: relative;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 65px 0px 50px;
}
:deep(.t-upload) {
  width: 250px;
  height: 60px;
}
.logo-mg {
}
.content-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 60px;

  img {
    max-width: 250px;
    max-height: 60px;
    width: 250px;
    height: 60px;
    object-fit: contain;
  }
  span {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    line-height: 28px;
  }
}
.content-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90px;
  flex: 1;
}

.content-door {
  position: absolute;
  bottom: 40px;
  left: calc(50% - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 52px;

  .iconfonts {
    font-size: 24px;
    color: rgba(235, 236, 233, 1);
    margin-bottom: 4px;
    line-height: 26px;
  }
  span {
    font-family: PingFang SC;
    font-size: 14px;
    line-height: 22.4px;
    color: rgba(235, 236, 233, 1);
    white-space: nowrap;
  }
}
</style>
